<template>
  <div class="user-info">
    <el-container>
      <el-header class="header">用户信息</el-header>
      <el-main>
        <div class="user-details">
          <el-avatar size="large" />
          <p>用户名: John Doe</p>
          <p>邮箱: john.doe@example.com</p>
        </div>

        <div class="favorites">
          <h3>收藏的餐厅</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(restaurant, index) in favoriteRestaurants" :key="index">
              <el-card class="restaurant-card">
                <!-- 点击餐厅图片和名字进入餐厅详情页 -->
                <router-link :to="`/restaurant/${restaurant.id}`">
                  <img :src="restaurant.image" class="restaurant-image" />
                  <p class="restaurant-name">{{ restaurant.name }}</p>
                </router-link>
                <el-button type="text" @click="removeFavorite(index)" class="remove-favorite-btn">取消收藏</el-button>
              </el-card>
            </el-col>
          </el-row>
        </div>


        <div class="comments">
          <h3>我的评论</h3>
          <el-row :gutter="20">
            <el-col :span="24" v-for="(comment, index) in comments" :key="index">
              <el-card class="comment-card">
                <p>{{ comment }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 收藏的餐厅
      favoriteRestaurants: [
        {id: 1, name: '餐厅A', image: '/src/assets/picture/111.jpg'},
        {id: 2, name: '餐厅B', image: '/src/assets/picture/222.jpg'}
      ],


      // 用户评论
      comments: [
        '这家餐厅的菜非常好吃，环境也很不错！',
        '服务态度很好，下次还会再来。',
        '餐厅的菜品价格略高，但总体体验还是很不错的。'
      ]
    };
  },
  methods: {
    // 取消收藏餐厅
    removeFavorite(index) {
      this.favoriteRestaurants.splice(index, 1);
    }
  }
};
</script>

<style scoped>
/* 样式优化部分 */

/* 整体容器 */
.user-info {
  margin: 20px;
}

/* 头部 */
.header {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  background-color: #f4f4f4;
  margin-bottom: 20px;
}

/* 用户信息部分 */
.user-details {
  text-align: center;
  margin-bottom: 40px;
}

/* 收藏餐厅的卡片样式 */
.restaurant-card {
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.restaurant-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 5px;
}

.restaurant-name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.remove-favorite-btn {
  margin-top: 10px;
  color: #ff4d4f;
}

/* 历史记录部分 */
.history {
  margin-top: 40px;
}

.history ul {
  padding-left: 20px;
}

.history li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #555;
}

/* 评论部分 */
.comments {
  margin-top: 40px;
}

.comment-card {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.comment-card p {
  font-size: 16px;
  color: #333;
}
</style>
